<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
</head>

<body>
    <!-- 
        生命周期
            1.又名：生命周期回调函数、生命周期函数、生命周期钩子
            2.是什么：Vue在关键时候帮我们调用一下特殊名称的函数
            3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
            4.生命周期甘薯中的this指向的是vm或组件实例对象
     -->
    <div id="root">
        <h2 v-if="a">你好</h2>
        <h2 :style="{opacity:opacity}">欢迎学习Vue</h2>
    </div>
</body>
<script>
    Vue.config.productionTip = false;

    const vm = new Vue({
        el: "#root",
        data: {
            a: false,
            opacity: 1
        },
        methods: {

        },
        //VUE完成模板解析，并把初识的真实dom放入页面后，挂载完毕
        mounted() {
            console.log("mounted");
            setInterval(() => {
                this.opacity -= 0.01;
                if (this.opacity <= 0) {
                    this.opacity = 1;
                }
            }, 16)
        },
    })

    //通过外部定时器实现
    // setInterval(() => {
    //     vm.opacity -= 0.01;
    //     if (vm.opacity <= 0) {
    //         vm.opacity = 1;
    //     }
    // }, 16)
</script>

</html>